<template>
  <div class="designer-container">
    <div class="content">
      <div class="top">
        <div class="title-wrapper">
          <Input placeholder="请输入用户名/手机号" @search="hanldeSearch" />
        </div>
        <div>
          <el-button @click="add">添加</el-button>
          <el-button @click="exportClick">导出EXCEL</el-button>
        </div>
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 100%" :height="height">
          <el-table-column prop="date" label="用户">
            <template slot-scope="scope">
              <img style="width:40px;height:40px" :src="scope.row.avatar" alt />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="phone" label="手机号" width="130" />
          <el-table-column prop="user_phone" label="用户账号" width="180" />
          <el-table-column prop="created_at" label="入驻时间" width="180" />
          <el-table-column label="作品" width="120">
            <template slot-scope="scope">
              <div>
                <el-tooltip class="item" effect="dark" content="查看资料 / 作品" placement="top">
                  <span
                    class="col-blue"
                    @click="$router.push({path: '/designer/production',query:{designerId:scope.row.id}})"
                  >{{ scope.row.product_num }}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="积分" width="180">
            <template slot-scope="scope">
              <div>
                <el-tooltip class="item" effect="dark" content="查看积分明细" placement="top">
                  <span
                    class="col-blue"
                    @click="$router.push({path: '/designer/point',query:{id:scope.row.id}})"
                  >{{ scope.row.score }}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="已核销优惠券" width="120">
            <template slot-scope="scope">
              <div>
                <el-tooltip class="item" effect="dark" content="查看优惠券使用情况" placement="top">
                  <span
                    class="col-blue"
                    @click="$router.push({path: '/designer/coupon',query:{designerId:scope.row.id}})"
                  >{{ scope.row.coupon_num }}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="预约记录" width="180">
            <template slot-scope="scope">
              <div>
                <el-tooltip class="item" effect="dark" content="查看预约详情" placement="top">
                  <span
                    class="col-blue"
                    @click="$router.push({path: '/reservation/index',query:{designerId:scope.row.id}})"
                  >{{ scope.row.appointment_num }}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sort" @change="sortDesigner(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" fixed="right" align="center" width="120">
            <template slot-scope="scope">
              <div>
                <span
                  v-show="scope.row.disable == 0"
                  class="col-blue"
                  @click="disableDesigner(scope.row,1)"
                >禁用</span>
                <span
                  v-show="scope.row.disable == 1"
                  class="col-red"
                  @click="disableDesigner(scope.row,0)"
                >已禁用</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page.sync="page"
            :page-size="size"
            layout="total,prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 添加 -->
    <el-dialog
      title="添加"
      :visible.sync="addDialogVisible"
      :before-close="handleAddClose"
      class="approveDialog"
    >
      <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
        <el-form-item label="手机号:">
          <el-input v-model="ruleForm.phone" class="textarea" placeholder="请输入手机号码" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDesinger">添加为设计师</el-button>
      </span>
    </el-dialog>
    <!-- 添加成功 -->
    <el-dialog
      title="添加成功"
      :visible.sync="successDialogVisible"
      :before-close="handleSuccessClose"
      class="approveDialog"
    >
      <img src="@/assets/my_images/success.png" alt class="success" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="toEditWorks">去编辑作品</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Input from "@/common/input";
import Resize from '@/common/mixins/resize'
import {
  getDesignerList,
  sortDesigner,
  disableDesigner,
  addDesigner
} from "@/api/http/designer";
export default {
  components: {
    Input
  },
    mixins: [Resize],
  data() {
    return {
      defaultHeight:280,
      size: 10,
      total: 0,
      page: 1,
      newId: 0,
      ruleForm: {
        phone: ""
      },
      addDialogVisible: false,
      successDialogVisible: false,
      query: "",
      tableData: []
    };
  },
  created() {
    this.getDesignerList();
  },
  methods: {
    // 导出excel
    exportClick() {
      window.location.href = `http://ddsc.izhixiu.cn/api/back/designer/exportDesigner?keywords=${this.query}`
    },
    // 去编辑设计师作品
    toEditWorks() {
      this.$router.push({
        path: "/designer/edit-production",
        query: { designerId: this.newId }
      });
    },
    // 设计师禁用启用
    disableDesigner(row, num) {
      disableDesigner({ id: row.id }).then(res => {
        if (res.code == 200) {
          if (num == 1) {
            this.$message.success("禁用成功");
          } else {
            this.$message.success("启用成功");
          }
          this.getDesignerList();
        }
      });
    },
    // 设计师列表排序
    sortDesigner(item) {
      console.log(typeof item.sort);
      var params = {
        sort: item.sort / 1,
        id: item.id
      };
      sortDesigner(params).then(res => {
        if (res.code == 200) {
          this.$message.success("更新成功");
          this.getDesignerList();
        }
      });
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.page = val;
      this.getDesignerList();
    },
    // 获取设计师列表数据
    getDesignerList() {
      getDesignerList({
        page: this.page,
        keywords: this.query
      }).then(res => {
        // console.log(res, "---r-es");
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    hanldeSearch(query) {
      this.query = query;
      this.page = 1;
      this.getDesignerList({
        page: this.page,
        keywords: this.query
      });
    },
    handleSuccessClose() {
      this.successDialogVisible = false;
    },
    addDesinger() {
      addDesigner({ phone: this.ruleForm.phone }).then(res => {
        if (res.code == 200) {
          this.newId = res.data.designer_id;
          this.addDialogVisible = false;
          this.successDialogVisible = true;
        }
      });
    },
    add() {
      this.addDialogVisible = true;
    },
    handleAddClose() {
      this.addDialogVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-table.scss";
@import "@/styles/color.scss";
.designer-container {
  .content {
    .top {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      .title-wrapper {
        display: flex;
        align-content: center;
        .title {
          height: 44px;
          line-height: 44px;
          color: rgba(68, 68, 68, 1);
          font-size: 18px;
          font-family: Roboto;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
  }
}
.textarea /deep/ .el-input__inner {
  width: 300px;
}
.approveDialog /deep/ .el-dialog {
  width: 600px;
}
.success {
  display: block;
  margin: 0 auto;
}
.block {
  margin: 40px;
  text-align: center;
}
</style>
